<template>
  <div class="common-layout">
    <el-container>
      <el-header id="header">
        <el-affix position="top" :offset="0">
          <div class="header-content">
            <index-heade @search="handleSearch" />
          </div>
        </el-affix>
      </el-header>

      <el-main style="padding: 0;" >
        <Articles :searchKeyword="searchKeyword"/>
      </el-main>
    </el-container>

    <!-- 回到顶部按钮 -->
    <el-button v-if="showBackToTop" class="back-to-top" type="primary" circle @click="scrollToTop">
      <el-icon>
        <ArrowUp />
      </el-icon>
    </el-button>
  </div>
</template>


<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import IndexHeade from '@/components/IndexHeade.vue';
import Articles from '@/components/ArticlesList.vue';
import { useSearchStore } from '@/stores/searchStore';

const showBackToTop = ref(false);
const searchKeyword = ref('');
const searchStore = useSearchStore();
// 接收来自 IndexHeade 的搜索事件
const handleSearch = (keyword) => {
  searchStore.setSearchKeyword(keyword);
  console.log('搜索关键词:', keyword);
};
// 滚动监听
const handleScroll = () => {
  const scrollTop =
    window.scrollY ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  showBackToTop.value = scrollTop > 300; // 滚动超过300px显示按钮
};

// 回到顶部方法
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动效果
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
#header {
  height: 180px;
  margin-top: 10px;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background-color: rgb(115.2, 117.6, 122.4);
  border-color: rgb(115.2, 117.6, 122.4);
}
</style>